<template>
    <div class="header">
        <img src="@/assets/witek.png" class="icon" alt="" />

        <div class="name">
            <img src="@/assets/header-chat.png" class="img" alt="" />
            <div>Live Chat</div>
        </div>

        <div class="right-box">
            <!-- <el-icon class="right-icon" @click="$emit('hide')"><SemiSelect /></el-icon> -->
            <img
                class="right-icon"
                src="@/assets/zoom.png"
                alt=""
                @click="zoom"
                v-if="state.isZoomIn"
            />
            <el-icon class="right-icon" @click="zoom" v-else><FullScreen /></el-icon>
            <img src="@/assets/close.png" class="close" alt="" @click="close" />
        </div>
    </div>
</template>

<script setup>
import screenfull from 'screenfull'
import { FullScreen } from '@element-plus/icons-vue'
import { onMounted, reactive } from 'vue'

const emits = defineEmits(['zoom', 'close'])

const state = reactive({
    isZoomIn: false,
})

onMounted(() => {
    screenfull.on('change', () => {
        if (!screenfull.isFullscreen) {
            state.isZoomIn = false
            console.log('全屏已退出，可能是通过ESC或其他方式触发')
            // 在这里执行你希望在退出全屏时进行的操作
        }
    })
})

const zoom = () => {
    state.isZoomIn = !state.isZoomIn
    emits('zoom')
}

const close = () => {
    emits('close')
    state.isZoomIn = false
    if (screenfull.isFullscreen) {
        screenfull.exit()
    }
}
</script>

<style scoped lang="scss">
.header {
    min-height: 72px;
    border-radius: 12px 12px 0px 0px;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ff8217;
    color: #fff;

    .icon {
        width: 72px;
        height: 34px;
    }

    .name {
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 18px;
        .img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
    }

    .right-box {
        display: flex;
        align-items: center;
        color: #fff;

        .right-icon {
            margin-right: 24px;
            font-size: 20px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            transition: 0.5s ease;

            &:hover {
                transform: scale(1.2);
            }
        }
    }

    .close {
        width: 16px;
        height: 16px;
        cursor: pointer;
        transition: 0.5s ease;

        &:hover {
            transform: scale(1.2);
        }
    }
}

.header--img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-self: center;
}

.header--title {
    align-self: center;
    padding: 10px;
    flex: 1;
    user-select: none;
    font-size: 20px;
}

.header--title.enabled {
    cursor: pointer;
    border-radius: 5px;
}

.header--title.enabled:hover {
    box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
}

.header--close-button {
    width: 40px;
    align-self: center;
    height: 40px;
    margin-right: 10px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 5px;
    margin-left: auto;
}

.header--close-button:hover {
    box-shadow: 0px 2px 5px rgba(0.2, 0.2, 0.5, 0.1);
}

.header--close-button img {
    width: 100%;
    height: 100%;
    padding: 13px;
    box-sizing: border-box;
}

@media (max-width: 450px) {
    .header {
        border-radius: 0px;
    }
}
</style>
